<template>
  <a-menu v-model="currentMenu" mode="horizontal" class="nav">
    <a-menu-item :key="'/management/projects'" class="menu-item">
      <!-- 项目管理 menu 新用户引导 step-5 -->
      <guide-step-popover :guide-step="5">
        <template #header>
          <router-link :to="'/management/projects'">
            项目管理
          </router-link>
        </template>
      </guide-step-popover>
    </a-menu-item>
    <a-menu-item
      v-for="target in navigationTargets"
      :key="target.path"
      class="menu-item"
    >
      <router-link :to="target.path">
        {{ target.name }}
      </router-link>
    </a-menu-item>
    <a-menu-item v-if="userRole" :key="'/management/audit'" class="menu-item">
      <router-link :to="'/management/audit'">
        管理员
      </router-link>
    </a-menu-item>
  </a-menu>
</template>

<script lang="ts">
/**
 * navigation bar of home wiew
 * @author Huihua Lu
 */
import { Component, Vue } from 'vue-property-decorator'
import User from '@/store/modules/user'
import GuideStepPopover from '@/components/user-guide/GuideStepPopover.vue'

@Component({
  components: {
    GuideStepPopover,
  },
})
export default class HomeNavBar extends Vue {
  public navigationTargets = [
    {
      name: '数据管理',
      path: '/management/data',
    },
  ]

  public get userRole() {
    return User.currentUser?.role === 1
  }

  public currentMenu = [
    this.$route.path.startsWith('/management/project')
      ? '/management/projects'
      : '',
    this.$route.path.startsWith('/management/data') ? '/management/data' : '',
    this.$route.path.startsWith('/management/audit') ? '/management/audit' : '',
  ]
}
</script>

<style lang="less" scoped>
@import '@/constants';

.nav {
  height: 44px;
  padding: 0 @PAGE_HORIZONTAL_PADDING 0 13px;

  .ant-menu-item {
    color: #5d637e;
    font-weight: bold;
    height: 43px;
    line-height: 43px;
    margin-bottom: 5px;
    margin-left: 32px;
    padding: 0;
  }
}

.menu-item > a {
  color: @TEXT_COLOR;
  display: inline-block;
  font-size: @TEXT_FONT_SIZE;
  text-align: center;
}
</style>
